<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap4单选复选框特效(暗黑/光明模式) - PomeloCloud</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="https://file.uzykj.com/favicon.ico">
  <link rel="stylesheet" href="./public/css/theme-checkbox-radios.css">
  <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header class="navbar">
  <div class="container">
        <span>
            <a href="https://pomelo.work">PomeloCloud</a>
        </span>
    <ul>
      <li><a href="https://pomelo.work/BootstrapExtend/index.html" target="_blank">主题特效</a></li>
      <li><a href="https://pomelo.work/BootstrapExtend/css-checkbox-radios.html">纯原CSS</a></li>
      <li><a href="https://pomelo.work/BootstrapExtend/power-button-group.html">开关组</a></li>
      <li><a href="https://pomelo.work/NiceButton/index.html">响应式</a></li>
      <li><a href="https://pomelo.work/NiceButton/crystal-glass.html">水晶玻璃</a></li>
      <li><a href="https://pomelo.work/NiceButton/newbutton.html">新型按钮</a></li>
    </ul>
  </div>
</header>
<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12 text-center">
      <h1>Bootstrap4单选复选框特效(暗黑/光明模式)</h1>
    </div>
  </div>
</div>
<div class="section over-hide z-bigger"><input class="checkbox" type="checkbox" name="general" id="general">
  <label class="for-checkbox" for="general"></label>
  <div class="background-color"></div>
  <div class="section over-hide z-bigger">
    <div class="container pb-5">
      <div class="row justify-content-center pb-5">
        <div class="col-12 pt-5"><p class="mb-4 pb-2">Design Tools</p></div>
        <div class="col-12 pb-5"><input class="checkbox-tools" type="radio" name="tools" id="tool-1" checked><label
                class="for-checkbox-tools" for="tool-1"><i class='uil uil-line-alt'></i> line</label>
          <input class="checkbox-tools" type="radio" name="tools" id="tool-2"><label
                  class="for-checkbox-tools" for="tool-2"><i class='uil uil-vector-square'></i> square</label>
          <input class="checkbox-tools" type="radio" name="tools" id="tool-3"><label
                  class="for-checkbox-tools" for="tool-3"><i class='uil uil-ruler'></i> ruler</label>
          <input class="checkbox-tools" type="radio" name="tools" id="tool-4"><label
                  class="for-checkbox-tools" for="tool-4"><i class='uil uil-crop-alt'></i> crop</label>
          <input class="checkbox-tools" type="radio" name="tools" id="tool-5"><label
                  class="for-checkbox-tools" for="tool-5"><i class='uil uil-brush-alt'></i> brush</label>
          <input class="checkbox-tools" type="radio" name="tools" id="tool-6"><label
                  class="for-checkbox-tools" for="tool-6"><i class='uil uil-image-resize-landscape'></i> resize</label>
        </div>
        <div class="col-12 pt-1"><p class="mb-4 pb-2">Client Budget</p></div>
        <div class="col-xl-10 pb-5"><input class="checkbox-budget" type="radio" name="budget" id="budget-1"
                                           checked><label class="for-checkbox-budget" for="budget-1"><span
                data-hover="500$">500$</span></label><input class="checkbox-budget"
                                                            type="radio" name="budget"
                                                            id="budget-2"><label
                class="for-checkbox-budget" for="budget-2"><span data-hover="1000$">1000$</span></label>
          <input class="checkbox-budget" type="radio" name="budget" id="budget-3"><label
                  class="for-checkbox-budget" for="budget-3"><span data-hover="1500$">1500$</span></label>
          <input class="checkbox-budget" type="radio" name="budget" id="budget-4"><label
                  class="for-checkbox-budget" for="budget-4"><span data-hover="2000$">2000$</span></label>
          <input class="checkbox-budget" type="radio" name="budget" id="budget-5"><label
                  class="for-checkbox-budget" for="budget-5"><span data-hover="2500$">2500$</span></label>
          <input class="checkbox-budget" type="radio" name="budget" id="budget-6"><label
                  class="for-checkbox-budget" for="budget-6"><span data-hover="5000$">5000$</span></label></div>
        <div class="col-12 pt-1"><p class="mb-4 pb-2">Booking Options</p></div>
        <div class="col-12 pb-5"><input class="checkbox-booking" type="checkbox" name="booking" id="booking-1"><label
                class="for-checkbox-booking" for="booking-1"><i class='uil uil-coffee mr-3'></i><span class="text">breakfast</span></label>
          <input class="checkbox-booking" type="checkbox" name="booking"
                 id="booking-2"><label class="for-checkbox-booking" for="booking-2"><i
                  class='uil uil-restaurant mr-3'></i><span class="text">dinner</span></label>
          <input class="checkbox-booking" type="checkbox" name="booking"
                 id="booking-3"><label class="for-checkbox-booking" for="booking-3"><i
                  class='uil uil-car-sideview mr-3'></i><span class="text">pick up</span></label>
          <input class="checkbox-booking" type="checkbox" name="booking"
                 id="booking-4"><label class="for-checkbox-booking" for="booking-4"><i
                  class='uil uil-flower mr-3'></i><span class="text">garden</span></label>
          <input class="checkbox-booking" type="checkbox" name="booking"
                 id="booking-5"><label class="for-checkbox-booking" for="booking-5"><i
                  class='uil uil-wifi mr-3'></i><span class="text">internet</span></label>
          <input class="checkbox-booking" type="checkbox" name="booking"
                 id="booking-6"><label class="for-checkbox-booking" for="booking-6"><i
                  class='uil uil-parking-square mr-3'></i><span class="text">parking</span></label>
          <input class="checkbox-booking" type="checkbox" name="booking"
                 id="booking-7"><label class="for-checkbox-booking" for="booking-7"><i
                  class='uil uil-tv-retro mr-3'></i><span class="text">television</span></label>
          <input class="checkbox-booking" type="checkbox" name="booking"
                 id="booking-8"><label class="for-checkbox-booking" for="booking-8"><i
                  class='uil uil-books mr-3'></i><span class="text">books</span></label>
          <input class="checkbox-booking" type="checkbox" name="booking"
                 id="booking-9"><label class="for-checkbox-booking" for="booking-9"><i
                  class='uil uil-kayak mr-3'></i><span class="text">kayak</span></label>
          <input class="checkbox-booking" type="checkbox" name="booking" id="booking-10"><label
                  class="for-checkbox-booking" for="booking-10"><i class='uil uil-glass-martini-alt mr-3'></i><span
                  class="text">drink</span></label><input class="checkbox-booking"
                                                          type="checkbox" name="booking"
                                                          id="booking-11"><label
                  class="for-checkbox-booking" for="booking-11"><i class='uil uil-dumbbell mr-3'></i><span class="text">gym</span></label>
          <input class="checkbox-booking" type="checkbox" name="booking" id="booking-12"><label
                  class="for-checkbox-booking" for="booking-12"><i class='uil uil-sign-alt mr-3'></i><span class="text">walking tours</span></label>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
